<html>

<head>
    <meta charset="UTF-8">
    <title>计算圆周长面积</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <script>
        function jc() {
            var r = document.getElementsByName("r")[0].value;
            const pi = 3.14;
            var c = 2 * pi * r;
            document.getElementById("c").value = c.toFixed(2);
        }
        function js() {
            var r = document.getElementsByName("r")[0].value;
            const pi = 3.14;
            var s = pi * r * r;
            document.getElementById("s").value = s.toFixed(2);
        }
        function jn() {
            document.getElementsByName("r")[0].value = "";
            document.getElementById("c").value = "";
            document.getElementById("s").value = "";
        }
    </script>
    <div>
        <form>
            请输入圆的半径：<input type="text" name="r"><br />
            圆的周长为:<input type="text" id="c"><br />
            圆的面积为:<input type="text" id="s"><br />
            <input type="button" value="计算周长" onclick="jc()">
            <input type="button" value="计算面积" onclick="js()">
            <input type="button" value="清空" onclick="jn()">
        </form>
    </div>
</body>

</html>